<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery筛选选择器</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
</head>
<body>
    <div>
        <p>筛选选择器：</p>
        <p>$('li:first')：获取第一个 li元素；</p>
        <p>$('li:last')：获取最后一个 li元素；</p>
        <p>$('li:eq(index)')：获取 li标签中，索引号为 index的元素，索引号 index从0开始。</p>
        <p>$('li:odd')：获取到的 li元素中，选择索引号为奇数的元素。</p>
        <p>$('li:even')：获取到的 li元素中，选择索引号为偶数的元素。</p>
        <br>
        <p>$('li:parent()')：查找父级。</p>
        <p>$('li:parents()')：查找所有的父级。当查找父级的父级元素时，可以使用$('li').parents('.box')。</p>
        <p>$('ul').children('li')：子代选择器，相当于$('ul>li')。</p>
        <p>$('ul').find('li')：后代选择器，相当于$('ul li')</p>
        <p>$('.first').siblings('li')：兄弟选择器，不包括本身。包括当前元素前面和后面的同级兄弟元素。</p>
        <p>$('.first').nextAll()：弟弟选择器，查找当前元素之后的所有同辈元素。</p>
        <p>$('.last').prevAll()：查找当前元素之前所有同辈元素。</p>
        <p>$('div').hasClass('class')：检查当前的元素是否含有某个特定的类，如果有，则返回 true。</p>

        <p>$('input:checked')：当 input标签的 type为 checkbox时，可以查看复选框是否被选中，如果被选中则返回true，否则返回false。(在22节有使用)</p>
    </div>
    <div class="box">
        <ul>
            <li>不要学编程1</li>
            <li>不要学编程2</li>
            <li>不要学编程3</li>
            <li>不要学编程4</li>
            <li>不要学编程5</li>
            <li>不要学编程6</li>
        </ul>
        <ol>
            <li>不要学编程1</li>
            <li class="siblings">不要学编程2</li>
            <li>不要学编程3</li>
            <li>不要学编程4</li>
            <li class="prevAll">不要学编程5</li>
            <li>不要学编程6</li>
        </ol>
    </div>
    <div>
        <div class="father">
            <div class="son">子代元素</div>
        </div>
        <div class="nav">
            <p>千万不要学编程</p>
            <div>
                <p>万万不要学编程</p>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            $('ul>li:first').css('color','red');
            $('ul>li:last').css('color','green');
            $('ul>li:eq(3)').css('color','blue')
            $('ol>li:odd').css('color','red')
            $('ol>li:even').css('color','green')
        })
        $(function(){
            $('.son').parent().css('background-color','red');
            $('.nav').children('p').css('color','green');
            $('.siblings').siblings('li').css('background-color','blue');
            $('.siblings').nextAll('.prevAll').css('background-color','green');
            $('.prevAll').prevAll('.siblings').css('background-color','red');
            console.log($('ol>li:eq(1)').hasClass('siblings'));
        })
    </script>
</body>
</html>